<%@ page language="java" contentType="text/html;charset=UTF-8" pageEncoding="utf-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<html>
<head>
    <title></title>
    <link type="text/css" rel="stylesheet" href='<spring:url value="/webjars/bootstrap/3.3.5/css/bootstrap.min.css"/>'/>
    <link type="text/css" rel="stylesheet"
          href='<spring:url value="/webjars/bootstrap/3.3.5/css/bootstrap-theme.min.css"/>'/>
    <script src='<spring:url value="/webjars/jquery/1.11.1/jquery.min.js"/>'></script>
    <script src='<spring:url value="/webjars/bootstrap/3.3.5/js/bootstrap.js"/>'></script>
    <script src='<spring:url value="/webjars/angularjs/1.5.5/angular.min.js"/>'></script>
    <script src='<spring:url value="/webjars/angularjs/1.5.5/angular-resource.js"/>'></script>
    <script src='<spring:url value="/webjars/bootbox/4.4.0/bootbox.js"/>'></script>
    <link href="<%=request.getContextPath() %>/resources/css/content.css" rel="stylesheet">
    <script src="<%=request.getContextPath() %>/resources/js/queueMonitor/QueueMonitorModel.js"></script>
    <script src="<%=request.getContextPath() %>/resources/js/queueMonitor/QueueMonitorService.js"></script>
    <script src="<%=request.getContextPath() %>/resources/js/queueMonitor/QueueMonitorController.js"></script>
</head>
<body ng-app="queueMonitorApp" ng-controller="queueMonitorCtrl">
<div class="adcc-container">
    <form class="form-inline" style="float: right;">
        <div class="input-group">
            <ol class="breadcrumb" style="padding: 0px;margin: auto">
                <li class="active">刷新时间：</li>
            </ol>
        </div>
        <div class="form-group">
            <select ng-model="selectTime" class="form-control" ng-init="selectTime='30000'"
                    ng-change="changeTime(selectTime)">
                <option value='15000'>15秒</option>
                <option value='30000'>30秒</option>
                <option value='60000'>60秒</option>
            </select>
        </div>
    </form>
    <ol class="breadcrumb">
        <li class="active">队列监控</li>
    </ol>
    <table class="table table-bordered table-striped" style="margin-bottom: 0">
        <thead>
        <tr>
            <th>序号</th>
            <th>队列名</th>
            <th>生产者数</th>
            <th>消费者数</th>
            <th>队列深度</th>
            <th>队列最大深度</th>
            <th>所属用户</th>
        </tr>
        </thead>
        <tbody style="width: 100%">
        <tr ng-repeat="queueInfo in queueInfoList" ng-style="{color:queueInfo.blocked ? 'red':''}">
            <td style="width: 5%">{{ $index + 1 }}</td>
            <td style="text-align:left;width: 15%"><a ng-click="showDialogQueueInfo(queueInfo)">{{queueInfo.name}}</a></td>
            <td style="width: 15%">{{queueInfo.consumers}}</td>
            <td style="width: 15%">{{queueInfo.producers}}</td>
            <td style="width: 15%">{{queueInfo.depth}}</td>
            <td style="width: 15%">{{queueInfo.maxDepth}}</td>
            <td style="overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-align:left;width: 20%" data-toggle="tooltip" data-placement="top" title="{{queueInfo.user }}">{{queueInfo.user}}</td>
        </tr>
        </tbody>
    </table>

</div>
<%--提示框模态框--%>
<div class="modal fade" id="dialogQueueInfo" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
     style="margin-top: 100px;pxoverflow-y: auto" data-backdrop="static">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title">
                    <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>清除队列
                </h4>
            </div>
            <div class="modal-body">
                <div class="form-inline">
                    <div class="form-group">
                        <label for="queueName">名称:</label>
                        <input type="text" class="form-control" name="queueName" id="queueName"
                               ng-model="queueName" disabled>
                        <label for="queueDepth">当前深度:</label>
                        <input type="text" class="form-control" name="queueDepth" id="queueDepth"
                               ng-model="queueDepth" disabled>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <div class="form-inline">
                    <div class="col-md-4 col-md-offset-8">
                        <button type="button" class="btn btn-primary" ng-click="clearQueue()">清除</button>
                        <button type="button" data-dismiss="modal" class="btn btn-danger">取消</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>
